<template>
	<view class="content">
		<view class="logoImg">
			<u-image width="30%" height="220rpx" shape="circle" src="../../static/logo.png"></u-image>
		</view>
		<view style="padding-top: 50rpx;">
			<u-form :model="loginForm">
				<u-form-item label="用户名:" label-width="150" left-icon="level">
					<u-input v-model="loginForm.username" />
				</u-form-item>
				<u-form-item label="密  码:" label-width="150" left-icon="lock" password-icon="true">
					<u-input type="password" v-model="loginForm.password" />
				</u-form-item>

				<u-button @click="formSubmit(loginForm)">登陆</u-button>
			</u-form>
		</view>
		<view style="text-align: right;color: blue;margin-top: 15px;">
			<view @click="toRegister">
				注册
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '登陆',
				loginForm: {
					username: '',
					password: ''
				},
			}
		},
		onLoad() {

		},
		onReady() {

		},
		methods: {
			// 跳到注册页面
			toRegister() {
				uni.navigateTo({
					url: '/pages/index/register'
				});
			},
			// 表单提交
			formSubmit(e) {
				this.$u.api.login(e).then(res => {
					if (res) {
						this.$store.commit('connectSocketInit',true) // 根据情况在合适的地方引入(我这里是在登录成功之后连接)
						uni.setStorage({
							key: 'userInfo',
							data: res.users
						});
						uni.setStorage({
							key: 'TOKEN',
							data: res.TOKEN
						});

						uni.switchTab({
							url: '/pages/chatGroup/index'
						});
					} else {
						console.log('数据请求错误～');
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		background: whitesmoke;
		width: 100vw;
		height: 100vh;
		padding-top: 50px;
	}

	.logoImg {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		border: 10px solid transparent;
	}
</style>
